<template>
  <div>
    <div class="btn_container">
      <input
        :type="type"
        :placeholder="msg"
        v-model="conval"
        :class="{ error_inp: !isok }"
        @blur="checkmsg"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: ["msg", "type", "proof", "errmsg"],
  data() {
    return {
      conval: "",
      isok: true,
      convalobj: { conval: "", type: this.type },
    };
  },
  methods: {
    checkmsg() {
      if (!this.isok) {
        this.$toast(this.errmsg);
      }
    },
  },
  watch: {
    conval(nowval) {
      // 用正则表达式判断的值传递给对象convalobj
      // this.convalobj.conval = this.proof.test(nowval);
      this.convalobj.conval = this.conval;
      this.$emit("getval", nowval);
      if (this.proof.test(nowval)) {
        this.isok = true;
      } else {
        this.isok = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.btn_container {
  input {
    box-sizing: border-box;
    width: 100%;
    height: 40 / 360 * 100vw;
    line-height: 40 / 360 * 100vw;
    border: none;
    outline: none;
    padding-left: 10 / 360 * 100vw;
    border-bottom: 1px solid black;
    margin-bottom: 10 / 360 * 100vw;
    background-color: #f2f2f2;
  }
  .error_inp {
    color: red;
    border-color: red;
  }
}
</style>